import React, { useState, useEffect } from 'react';
import { Text, StyleSheet, Modal as RNModal } from 'react-native';
import {
  Button,
  Toast,
  Flex,
  List,
  Tabs,
  Badge,
} from '@ant-design/react-native';
import UserStore from '@/stores/userStore';
import ReleaseJobStore from '@/screens/aviationMaintain/releaseJobStore';
import { LoadingContainer } from '@/rcomponents/Container';
import Card from '@/screens/aviationMaintain/components/responsiveCard';
import FlexTextField from '@/rcomponents/flexTextField';
import { formatDate } from '@/helpers/dateutil';
import PDFView from 'react-native-view-pdf';

const styles = StyleSheet.create({
  searchbarSty: { height: 40, fontSize: 16 },
});

function SearchResultPage({ navigation, route }) {
  const userStore = UserStore.useStore();
  const rjStore = ReleaseJobStore.useStore();
  const [pdfModule, setPdfModule] = useState({
    ifShow: false,
    url: '',
  });
  useEffect(() => {
    handleSearch();
  }, []);
  const handleClose = () => {
    setPdfModule({ ...pdfModule, ifShow: false });
  };
  const handleViewCard = (item) => {
    setPdfModule({
      ...pdfModule,
      url: `http://testmrs.loongair.cn${item.jobCardUrl}`,
      ifShow: true,
    });
  };
  const handleSearch = async () => {
    if (route.params) {
      const ddfcPara = {
        acno: route.params.acno,
        status: route.params.status,
        menutype: route.params.menutype,
        desc: route.params.description,
        ddfcNo: route.params.ddfcNo,
        ata: route.params.ATA,
      };
      const res = await rjStore.getDdFcAndFleetMonitor(
        userStore.user.LoginName,
        ddfcPara,
      );
      if (res.errorCode) {
        Toast.fail(res.errorMsg);
        return;
      }
    }
  };

  return (
    <>
      <LoadingContainer
        onRefresh={handleSearch}
        loading={rjStore.getDdFcAndFleetMonitor.loading}
        data={rjStore.ddfcInfo}
        renderItem={({ item }) => (
          <List>
            <Card key={item.index}>
              <Card.Body>
                <Flex>
                  <FlexTextField label="序号：" fieldValue={item.index} />
                  <FlexTextField label="机号：" fieldValue={item.acno} />
                </Flex>
                <Flex>
                  <FlexTextField
                    label="保留单类型："
                    fieldValue={item.status}
                  />
                  <FlexTextField label="版本：" fieldValue={item.version} />
                </Flex>
                <Flex>
                  <FlexTextField label="ATA：" fieldValue={item.ata} />
                  <FlexTextField label="保留编号：" fieldValue={item.ddfcNo} />
                </Flex>
                <Flex>
                  <FlexTextField
                    label="故障发生时间："
                    fieldValue={formatDate(item.date, 'YYYY-MM-DD HH:mm')}
                  />
                </Flex>
                <Flex>
                  <FlexTextField
                    label="截止日期："
                    fieldValue={formatDate(item.limitTime, 'YYYY-MM-DD HH:mm')}
                  />
                </Flex>
                <Flex>
                  <FlexTextField
                    label="故障或缺陷描述："
                    fieldValue={item.description}
                  />
                </Flex>
              </Card.Body>
              <Card.Footer
                key="footer"
                extra={
                  item.jobCardUrl && (
                    <Button
                      size="small"
                      type="primary"
                      onPress={() => {
                        handleViewCard(item);
                      }}
                    >
                      查看附件
                    </Button>
                  )
                }
              />
            </Card>
          </List>
        )}
      />
      <RNModal visible={pdfModule.ifShow} animationType="slide">
        <PDFView
          fadeInDuration={250.0}
          style={{ flex: 1 }}
          resource={pdfModule.url}
          resourceType={'url'}
          onLoad={() => console.log('PDF rendered from url')}
          onError={(error) => console.log('Cannot render PDF', error)}
        />
        <Button type="primary" onPress={handleClose}>
          关闭
        </Button>
      </RNModal>
    </>
  );
}

SearchResultPage.routeName = 'SearchResultPage';
SearchResultPage.permission = 'RSearchResultPage';
export default SearchResultPage;
